<template>
  <div class="table-toolbar">
    <!--顶部左侧区域-->
    <div class="table-toolbar-left">
      <slot name="tableTitle" />
    </div>

    <div class="table-toolbar-right">
      <!--顶部右侧区域-->
      <slot name="toolbar" />
      <!--刷新-->
      <n-icon size="18" style="color: white;" @click="reload">
        <ReloadOutlined />
      </n-icon>
      <!-- <n-tooltip trigger="hover">
        <template #trigger>
          <div class="table-toolbar-right-icon" @click="reload">
            <n-icon size="18">
              <ReloadOutlined />
            </n-icon>
          </div>
        </template>
        <span style="color: white;">刷新</span>
      </n-tooltip> -->
    </div>
  </div>
  <div class="s-table">
    <n-DataTable
      ref="tableElRef"
      v-bind="getBindProps"
      :pagination="pagination"
      @update:page="updatePage"
      @update:page-size="updatePageSize"
    >
      <template #empty>
        <slot name="empty" />
      </template>
    </n-DataTable>
  </div>
</template>

<script>
import { ReloadOutlined } from '@vicons/antd'
import { tableProps } from './tools/props.js'
import { useDataSource } from './tools/useDataSource.js'
import { usePagination } from './tools/usePagination.js'
import { ref, unref, computed, toRaw, provide } from 'vue'
export default {
  name: 'DataTable',
  components: { ReloadOutlined },
  props: {
    ...tableProps
  },
  emits: [
    'fetch-success',
    'fetch-error',
    'update:checked-row-keys',
    'edit-end',
    'edit-cancel',
    'edit-row-end',
    'edit-change'
  ],
  setup(props, { emit }) {
    const getProps = computed(() => {
      return { ...props }
    })

    /* loading--start */
    const loadingRef = ref(unref(getProps).loading)
    const getLoading = computed(() => unref(loadingRef))
    function setLoading(loading) {
      loadingRef.value = loading
    }
    /* loading--end */

    /* pagination-start */
    const { getPaginationInfo, setPagination } = usePagination(getProps)
    const pagination = computed(() => toRaw(unref(getPaginationInfo)))

    /* 页码切换 */
    function updatePage(page) {
      setPagination({ page: page })
      reload()
    }

    /* 分页数量切换 */
    function updatePageSize(size) {
      setPagination({ page: 1, pageSize: size })
      reload()
    }
    /* pagination-end */

    /* tableData-start */
    const tableData = ref([])
    const { getDataSourceRef, getRowKey, reload, reFetch } = useDataSource(getProps, { getPaginationInfo, setPagination, tableData, setLoading }, emit)
    const isRequest = !!unref(getProps).request
    const getBindProps = computed(() => {
      return {
        ...unref(getProps),
        loading: unref(getLoading),
        rowKey: unref(getRowKey),
        data: isRequest ? unref(getDataSourceRef) : unref(getProps).data,
        remote: true
      }
    })

    emit('fetch-success', isRequest ? unref(getDataSourceRef) : unref(getProps).data)

    const key = Symbol('s-table')
    provide(key, { getBindProps })
    /* tableData-end */

    return {
      getBindProps,
      pagination,
      updatePage,
      updatePageSize,
      reload,
      reFetch
    }
  }
}

</script>

<style>
/* 描述悬浮框样式修改 */
.n-popover{
  /* position: relative ; */
  /* left: 35% ; */
  /* width: 40% ; */
}
/* .n-popover .n-popover__content{
  color: white !important;
} */
/* @media screen and (max-width: 1800px) {
  .n-popover{
      left: 50% ;
} */

/* } */

</style>
<style scoped lang='scss'>
.n-icon svg{
  color: white;
  cursor: pointer;
}
  .table-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 0 10px 0 1px;
    // padding: 15px 10px;
    .table-toolbar-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 0;
      flex: 1;
    }
    .table-toolbar-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 1;
      .table-toolbar-right-icon {
        margin-left: 12px;
        font-size: 16px;
        cursor: pointer;
        color: white;
        .n-icon{
          vertical-align: middle;
        }
        &:hover {
          color: #1890ff;
        }
      }
    }
  }
  .table-toolbar-inner-popover-title {
    padding: 2px 0;
  }

</style>
